<template>
  <div>
    <div class="descriptions__title">学习情况</div>
    <div class="study">
      <el-row :gutter="12">
        <el-col :span="8">
          <el-card shadow="hover">
            <div>已修学分</div>
            <div style="
                                      width: 100%;
                                      height: 50px;
                                      text-align: center;
                                      font-weight: bold;
                                    ">
              {{ courseNote?.credit || 111 }}
            </div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card shadow="hover">
            <div>课程通过率</div>
            <div style="
                                    width: 100%;
                                    height: 50px;
                                    text-align: center;
                                    font-weight: bold;
                                  ">
              {{ (courseNote?.passingRate * 100 || 10) + '%' }}
            </div>
            <!-- <div>
              已修课程{{ total }}门，通过课程{{
                courseNote?.passingRate === 1 ? total : Math.ceil(total * courseNote?.passingRate) }}门
            </div> -->
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card shadow="hover">
            <div> 平均绩点
              <el-tooltip effect="dark" content="Top Center prompts info" placement="top">
                <el-icon>
                  <QuestionFilled />
                </el-icon>
              </el-tooltip>
            </div>
            <div style="
                                    width: 100%;
                                    height: 50px;
                                    text-align: center;
                                    font-weight: bold;
                                  ">{{ courseNote?.gpa }}</div>
          </el-card>
        </el-col>
      </el-row>
      <div class="lineBlock"></div>
      <el-table :data="course" border stripe style="width: 100%">
        <el-table-column prop="session" label="学年学期" />
        <el-table-column prop="courseName" label="课程名称" />
        <el-table-column prop="courseCredit" label="学分" />
        <el-table-column prop="courseScore" label="成绩" />
        <!-- <el-table-column prop="isRetake" label="是否重修" :formatter="formatterIsRetake" /> -->
        <el-table-column prop="isRetake" label="是否重修" />
      </el-table>

      <!-- 分页器，total是查到多少条记录，page-size每页显示几条记录 -->
      <el-pagination small layout="prev, pager, next" :total="courseTotal" :page-size="coursePage.pageSize"
        @current-change="changeSize($event, 'o')"></el-pagination>
    </div>
    <div class="descriptions__title">科研创新</div>
    <div class="scientific">
      <el-row :gutter="5">
        <el-col v-for="(item, i) in scientificList" :key="i" :span="6">
          <el-card shadow="hover">
            <el-icon size="60px">
              <!-- <Memo v-if="item.icon === 'memo'" /> -->
              <img :src="item.icon" class="img" />
            </el-icon>

            <div class="content">
              <div>{{ item.text }}</div>
              <div>
                <span :style="{ color: item.color, 'font-weight': 'bold' }">{{
                  item.count
                }}</span>
                {{ item.unit }}
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <div class="lineBlock"></div>
      <el-table :data="research" border stripe style="width: 100%">
        <el-table-column prop="outcomeName" label="成果名称" />
        <el-table-column prop="outcomeType" label="成果类别" />
        <el-table-column prop="acquireTime" label="取得时间" />
      </el-table>

      <el-pagination small layout="prev, pager, next" :total="researchTotal" :page-size="researchPage.pageSize"
        @current-change="changeSize($event, 't')"></el-pagination>
    </div>
  </div>
</template>
<script setup>
import { QuestionFilled, Memo } from '@element-plus/icons-vue'
import { useRoute } from 'vue-router'
import {
  getScoreInfo,
  getStudentInfo,
  getResearchInfo,
} from '../../api/student'

import { ref } from 'vue'
const route = useRoute()
const info = ref({})

const courseNote = ref({})
const courseTotal = ref({})
const course = ref([])
const coursePage = ref({
  pageNum: 1,
  pageSize: 4,
})
getStudentInfo(route.params.id).then((res) => {
  const result = res.data.data
  info.value.classNum = result.classNum
  info.value.major = result.major
  info.value.stuName = result.stuName
  info.value.stuId = result.stuId
  scoreInfoFn()
  researchInfo()
})
function scoreInfoFn() {
  getScoreInfo({ ...coursePage.value, ...info.value }).then((res) => {
    const data = res.data.data
    course.value = data.data
    courseTotal.value = data.total
    courseNote.value = data.note
  })
}
function changeSize(val, type) {
  console.log('v', val, type)
  if (type === 'o') {
    coursePage.value.pageNum = val
    scoreInfoFn()
  }
  if (type === 't') {
    researchPage.value.pageNum = val
    researchInfo()
  }
}
// function formatterIsRetake(row, column) {
//   return row.isRetake === 0 ? "否" : "是"
// }
const research = ref([])
const researchTotal = ref()
const researchPage = ref({
  pageNum: 1,
  pageSize: 4,
})
const researchNote = ref()
function researchInfo() {
  getResearchInfo({ ...researchPage.value, ...info.value }).then((res) => {
    const data = res.data.data
    research.value = data.data
    researchTotal.value = data.total
    scientificList.value[0].count = data.note.paper
    scientificList.value[1].count = data.note.literature
    scientificList.value[2].count = data.note.patent
    scientificList.value[3].count = data.note.soft
  })
}

// const tableData = ref([
//   {
//     date: '2016-05-03',
//     name: 'T',
//     address: '12',
//     score: '80',
//     SF: '否',
//   },
//   {
//     date: '2016-05-02',
//     name: 'T',
//     address: '12',
//     score: '80',
//     SF: '否',
//   },
//   {
//     date: '2016-05-04',
//     name: 'T',
//     address: '12',
//     score: '80',
//     SF: '否',
//   },
//   {
//     date: '2016-05-01',
//     name: 'T',
//     address: '12',
//     score: '80',
//     SF: '否',
//   },
// ])
// assetsUrl路径
const assetsUrl = ref('../../../src/assets/')
const scientificList = ref([
  { icon: `${assetsUrl.value}res1.png`, text: '论文', count: 2, unit: '篇', color: 'red' },
  { icon: `${assetsUrl.value}res2.png`, text: '著作', count: 2, unit: '部', color: 'green' },
  { icon: `${assetsUrl.value}res3.png`, text: '专利', count: 2, unit: '篇', color: 'blue' },
  { icon: `${assetsUrl.value}res4.png`, text: '软著', count: 2, unit: '部', color: 'green' },
])
</script>
<style lang="scss" scoped>
.study {
  .el-card {
    height: 120px;
  }
}

.scientific {
  .el-card {
    :deep(.el-card__body) {
      display: flex;
      align-items: center;
      justify-content: center;

      .content {
        margin-left: 15px;
      }
    }
  }
}

.img {
  width: 50px;
  height: 50px;
}
</style>
